<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" th:href="@{css/element-ui.css}">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script th:src="@{js/vue.js}"></script>
    <script th:src="@{js/axios.js}"></script>
    <!-- 引入element 的组件库-->
    <script th:src="@{js/element-ui.js}"></script>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<template id="search">

    <el-container>
        <el-header>
            <el-input  v-model="input"  placeholder="歌名/歌手/歌词" @keyup.enter.native="search1()"></el-input>
        </el-header>
        <el-main>
            <el-table

                    :data="songs"
                    style="width: 100%"
                    :row-class-name="tableRowClassName">
                <el-table-column
                        prop="song_name"
                        label="歌名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="singer_name"
                        label="歌手"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="song_describing"
                        label="歌曲描述">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <i class="el-icon-headset"></i>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer></el-footer>
    </el-container>
</template>
<div id="app">
    <search></search>

</div>
<script>
    const search={
        template:'#search',
        data(){
            return{
                input:'',
                songs:[],
                isShow:false
            }
        },
        methods:{
            search1:function () {
                let _this=this
                axios.get("http://localhost:8883/searchByItem?item="+this.input
                ).then(function (response) {
                    _this.songs=response.data;
                    console.log(response.data)
                    this.isShow=true;
                }).then(function (err) {
                    console.log(err);
                })
                console.log(_this.songs+"songs")
                console.log(_this.input+"input")
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            }

        }
    }
    const app = new Vue({
        el:'#app',
        components:{
            search
        }
    })
</script>
</body>
</html>